<template>
    <div id="app-checkout" class="checkout-checkout">
        <a href="#page-top" class="go-top" style="display: none;"><i class="iconfont"></i></a>


        <div class="container">
            <ul class="breadcrumb">
                <li><a href="https://mall.opencart.cn/">首页</a></li>
                <li><a href="https://mall.opencart.cn/index.php?route=checkout/cart">购物车</a></li>
                <li><a href="https://mall.opencart.cn/index.php?route=checkout/checkout">结账</a></li>
            </ul>

            <div class="row">
                <div id="content">
                    <div class="col-sm-12">
                        <div class="nav-bar mr-0 ml-0">结账</div>
                    </div>
                    <div class="quick-checkout-wrapper">
                        <div class="main-section-wrapper mb-2">
                            <div class="checkout-section " id="shipping-address-section">
                                <div class="title-wrapper">
                                    <h2 class="mb-0">
                                        配送地址
                                        <a href="#/address-edit" class="btn-new-address text-primary">添加新地址</a>
                                    </h2>
                                </div>
                                <div id="shipping-existing" v-if=" address_info ">
                                    <ul>
                                        <li class="active" v-on:click="address_list()">
                                            <div class="item" >
                                                <i class="fa fa-map-marker" aria-hidden="true"></i>
                                                {{address_info.name}} ({{address_info.telephone}})<br>{{address_info.province_name}} {{address_info.city_name}} {{address_info.area_name}} <br>{{address_info.detail_address}}
                                            </div>
                                            <div class="address-action">
                                                <span class="edit"><i class="iconfont"></i></span>
                                            </div>
                                        </li>
                                    </ul>
                                    <input type="hidden" name="shipping_address_id" value="342">
                                </div>
                            </div>


                            <div class="checkout-section" id="payment-method-section">
                                <h2>支付方式</h2>
                                <div v-bind:class="{'active':item.code==checkout_info.payment_code}"
                                     v-for="item in payment_list" class="radio" >
                                    <label >
                                        <input v-on:click="change_payment(item)" type="radio" name="payment_method" checked="checked" >
                                        {{item.name}}
                                    </label>
                                </div>
                                <!--
                                <div class="radio active">
                                    <label>
                                        <input type="radio" name="payment_method" value="alipay" checked="checked">
                                        支付宝
                                    </label>
                                </div>
                                <div class="radio ">
                                    <label>
                                        <input type="radio" name="payment_method" value="wechat_pay">
                                        微信支付
                                    </label>
                                </div>
                                <div class="radio ">
                                    <label>
                                        <input type="radio" name="payment_method" value="bank_transfer">
                                        银行转账
                                    </label>
                                </div>
                                <div class="radio ">
                                    <label>
                                        <input type="radio" name="payment_method" value="cod">
                                        货到付款
                                    </label>
                                </div>
                                -->
                            </div>

                            <div class="checkout-section" id="shipping-method-section">
                                <h2>配送方式</h2>
                                <div v-for="item in shipping_list"

                                     v-bind:class="{'active':item.code == checkout_info.shipping_code }"
                                     class="radio">
                                    <label>
                                        <input v-on:click="change_shipping(item)"
                                               type="radio"
                                               name="shipping_method"
                                               value="free.free"
                                               checked="checked">
                                        {{ item.name }}</label>
                                </div>
                            </div>

                            <div class="checkout-section" id="cart-section">
                                <h2>购物车</h2>

                                <div v-for="item in goods_list" class="product-item">
                                    <img v-bind:src="item.img" class="img-responsive">
                                    <div class="info">
                                        <span class="name">{{item.name}}</span>
                                        <!--<span class="text-muted">Product 7</span>-->
                                        <span>￥{{item.price}} x {{item.goods_num}}</span>
                                        <span class="total">￥{{item.total_price}}</span>
                                    </div>
                                </div>
                                <!--
                                <div class="product-item">
                                    <img src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-9-100x100.png" class="img-responsive">
                                    <div class="info">
                                        <span class="name">Apple/苹果 13 英寸 2.3GHz 处理器 128GB 存储容量 MacBook Pro</span>
                                        <span class="text-muted">Product 21</span>
                                        <span>￥188.00 x 1</span>
                                        <span class="total">￥188.00</span>
                                    </div>
                                </div>
                                -->
                                <div class="list-two-column-justified">
                                    <dl v-for="item in total_group">
                                        <dt>
                                            <span>{{item.name}}</span>
                                        </dt>
                                        <dd>
                                            <span>￥{{item.price}}</span>
                                        </dd>
                                    </dl>
                                    <!--
                                    <dl >
                                        <dt>
                                            <span>商品总额</span>
                                        </dt>
                                        <dd>
                                            <span>￥785.00</span>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt>
                                            <span>免费配送</span>
                                        </dt>
                                        <dd>
                                            <span>￥0.00</span>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt>
                                            <strong>订单总额</strong>
                                        </dt>
                                        <dd>
                                            <strong>￥785.00</strong>
                                        </dd>
                                    </dl>
                                    -->
                                </div>
                            </div>

                            <div class="checkout-section" id="comment-section">
                                <h2>订单留言</h2>
                                <textarea v-model="message" name="comment" rows="4" class="form-control"></textarea>
                            </div>

                            <!--
                            <div class="checkout-section" id="agree-section">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="terms" value="1"> <span>我已阅读并同意 <a href="https://mall.opencart.cn/index.php?route=information/information/agree&amp;information_id=5" class="agree"> <b>使用条款</b></a></span>
                                    </label>
                                </div>
                            </div>
                            -->


                            <div class="ml-1 mr-1">
                                <input  v-on:click="create_order()"
                                        type="button" value="确认订单" id="button-submit"
                                       data-loading-text="正在加载..." class="btn btn-primary btn-block">
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>

        <footer>
            <div class="language-currency-wrapper mb-1 mt-1">
                <a href="#" id="switch-language">
                    <img src="catalog/language/zh-cn/zh-cn.png" alt="简体中文" title="简体中文">
                    简体中文
                </a>



                <a href="#" id="switch-currency">
                    ￥  人民币
                </a>



            </div>
            <div class="container">
                <div class="footer-powered">
                    技术支持 <a href="http://www.opencart.cn">opencart.cn</a> OpenCart 3.0 中文专业版 - PHP 开源电商系统 © 2018
                </div>
            </div>
        </footer>

        <bottom-nav></bottom-nav>
    </div>
</template>
<style scoped>

    .radio{
        margin-right:4px;
    }

</style>
<script>
    import nav from '../components/common/nav';
    export default {

        data:function(){
            return {

                address_info:null,
                checkout_info:null,
                shipping_list:[],
                payment_list:[],
                total_group:[],
                message:'',
            }
        },

        methods:{

            // get_default_address:function(){
            //     var url =  this.config.web_url + '/?r=address/get_default';
            //     var t = this;
            //     this.axios.get( url ,{}).then(function( res ){
            //         t.address_info = res.data;
            //
            //     });
            // },

            address_list:function(){
                this.$router.push('/checkout/address');
            },

            change_address:function(  ){

            },

            change_payment:function( payment ){

                var url = this.config.web_url + '/?r=checkout/checkout/payment';
                var t = this;

                var data = 'code=' + payment.code;
                this.axios.post( url, data ).then(function( res ){

                    t.checkout_info = res.data;
                    t.address_info = res.data.address;
                    t.payment_list = res.data.payment_list;
                    t.shipping_list = res.data.shipping_list;
                    t.goods_list = res.data.goods;
                    t.total_group = res.data.total;

                });

            },

            change_shipping:function(shipping){
                var url = this.config.web_url + '/?r=checkout/checkout/shipping';
                var t = this;

                var data = 'code=' + shipping.code;
                this.axios.post( url, data ).then(function( res ){

                    t.checkout_info = res.data;
                    t.address_info = res.data.address;
                    t.payment_list = res.data.payment_list;
                    t.shipping_list = res.data.shipping_list;
                    t.goods_list = res.data.goods;
                    t.total_group = res.data.total;

                });
            },

            init : function(){
                var url = this.config.web_url + '/?r=checkout/checkout';
                var t = this;
                this.axios.get( url ).then(function( res ){

                    t.checkout_info = res.data;
                    t.address_info = res.data.address;
                    t.payment_list = res.data.payment_list;
                    t.shipping_list = res.data.shipping_list;
                    t.goods_list = res.data.goods;
                    t.total_group = res.data.total;

                });
            },

            //
            create_order:function(){

                var url = this.config.web_url + '/?r=checkout/order/create';

                var data = 'message=' + this.message;
                this.axios.post(url, data).then(function( res ){

                    if( res.status == 0 ){

                        //todo跳转到 下单成功页面（或者支付页面）
                    }

                });

            }

        },

        created:function(){

            this.init();
            // this.get_default_address();
        },

        components:{
            'bottom-nav':nav
        }

    }
</script>
